{% extends "base.html" %}

{% block head %}
<title>{{Semester}}</title>
<style>
#reschedule span { font: italic bold 200% "Times"; }
div.button-holder {
  width: 100%;
  padding: 0px 0px 10px 0px;
  text-align: left;
}
#more-courses {
  height: 400px;
}
</style>
<script>
var semester = "{{semester}}";
/* Renders the program maps from the JSON data
 * - populates $("#progmaps-tab ul") with 
 *   $(li).data('data': prog, 'type': 'p')
 *
 * data: JSON data from the server
 */
var render_program_maps = function(data) {
  var ul = $("#progmaps-tab ul");
  if(data.error) {
    var li = $("<li>");
    li.append("Error:" + data.error);
    ul.append(li);
  } else {
    $.each(data.response, function(i, p) {
      var li = $("<li>")
        .append("[" + p.dept + "] " + p.progdesc)
        .addClass("program-map-entry")
        .data({
          type: "p",
          data: p
        });
      ul.append(li);
    });
  }
};

/* Renders the course selection list from JSON
 * 
 */
var render_courses = function(data) {
  var ul = $("#courses-tab ul");
  if(data.error) {
    ul.append("<li>" + data.error + "</li>");
  } else {
    $.each(data.response, function(i, c) {
      if(c.title) {
        var li = $("<li>")
          .append(c.code + ": " + c.title)
          .addClass("course-entry")
          .data({
            type: 'c',
            data: c
          });
        ul.append(li);
      }
    });
  }
}

/* proceses the clicking of either
 * program map entry or course selection entry
 */
var on_click_entry = function(e) {
  var type = $(this).data('type');
  var data = $(this).data('data');
  var ul = $("#courses");
  var li = function(c) {
    var title, code;
    title = c.title ? c.title : c.coursedesc;
    code = c.code;
    return $('<li>')
      .data('code', code)
      .append("<span class='code'>"+code+"</span>")
      .append("<span class='title'>"+title+"</span>")
      .append("<button class='remove'>x</button>");
  };
  if(type == 'c') {
    ul.append(li(data));
  } else if(type == 'p') {
    $.getJSON("{{url_for('program_map')}}",
      {semester: semester, program: data.program},
      function(data) {
        if(data.error)
          alert("Error: " + data.error);
        else
          $.each(data.response, function(i, c) {
            ul.append(li(c));
          });
      }
    );
  }
};

/* creates the necessary form inputs
 * and triggers the submission to
 * rescheduling page.
 */
var do_submit = function() {
  $("#courses li").each(function(i, li) {
    var code = $(li).data('code');
    var input = $('<input>').attr({
      type: 'hidden',
      name: 'course',
      value: code
    });
    $("#send-form").append(input);
  });
  $("#send-form").trigger('submit');
}

$(document).ready(function() {
  $("#tabs").tabs();
  $.getJSON("{{url_for('program_maps')}}",
    {semester: semester}, render_program_maps);
  $.getJSON("{{url_for('courses')}}",
    {semester: semester}, render_courses);
  $("li.program-map-entry,li.course-entry").live("click", on_click_entry);
  $("#clear-selection").click(function(e) {
    $("#courses").empty();
  });
  $("#courses button.remove").live('click', function(e) {
    var li = $(this).closest("li");
    li.slideUp(300, function() {li.remove()});
  });
  $("#reschedule").click(do_submit);
});
</script>
{% endblock %}

{% block body %}
<div class="container">
  <h1> Select the courses to work with </h1>
  <div class="span12">
    <div class="row">
      <div class="span4">
        <div>
          <div class="button-holder">
            <button class="btn primary" id="reschedule">Reschedule<span>!</span></button>
            <button class="btn" id="clear-selection">Clear</button>
          </div>
          <h2>Selected courses</h2>
          <ul id="courses"></ul>
          <h2>More courses</h2>
          <form id="send-form" method="get" 
                action="{{url_for("page_schedule", semester=semester)}}">
            <textarea id="more-courses" name="more-courses"></textarea>
          </form>
        </div>
      </div>
      <div class="span8">
        <div id="tabs">
          <ul>
            <li><a href="#progmaps-tab">Program Maps</a></li>
            <li><a href="#courses-tab">Courses</a></li>
          </ul>

          <div id="progmaps-tab">
            <input type="text" class="searchbar"></input>
            <div class="scrolled-view">
              <ul></ul>
            </div>
          </div>

          <div id="courses-tab">
            <input type="text" class="searchbar"></input>
            <div class="scrolled-view">
              <ul></ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
